<%--
  Created by IntelliJ IDEA.
  User: bobo
  Date: 2016/10/25
  Time: 13:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="../layout/head.jsp">
        <jsp:param name="title" value="上传图片"/>
    </jsp:include>

    <style>
        .form-x {
            padding-left: 50px;;
        }
        .form-group {
            position: relative;

        }
        #fileUpload{
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .file-upload-btn {
            margin-right: 50px;

        }
        .preview-header {
            overflow: hidden;

            padding: 20px 0;


        }
        .w100, .w55 {
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
            padding: 5px;
            border: 2px solid #ececec;
            border-radius: 3px;
            box-sizing: content-box;
            text-align: center;
            position: relative;
        }



        .w100::after {
            content: '大头像';
            padding: 0;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 0.5em;
        }

        .w55{
            width: 55px;
            height: 55px;

        }

        .w55::after {
            content: '小头像';
            padding: 0;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 0.5em;
        }



        .preview-header img {
            width: inherit;
            height: inherit;
        }


    </style>

</head>
<body>
<%--<div>--%>
<%--<h1>上传图片</h1>--%>
<%--<form action="${pageContext.request.contextPath}/admin/photo/add" method="post" enctype="multipart/form-data">--%>
<%--<input type="file" id="photo" name="fileName"><br>--%>
<%--<input type="submit" value="上传">--%>
<%--</form>--%>
<%--</div>--%>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>上传图片</strong></div>
    <div class="body-content">
        <form class="form-x" action="${pageContext.request.contextPath}/admin/photo/add" method="post"
              enctype="multipart/form-data">
            <div class="form-group">
                <label for="fileUpload" class="file-upload-btn button bg-blue">点击上传图片</label>
                <input type="file" id="fileUpload" name="fileName">
                <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
            </div>
            <div class="preview-header">
               <div class="w100">

               </div>
                <div class="w55">

                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function(){
        $('#fileUpload').change(function(){
            var file = this.files[0];    //选择上传的文件
            var r = new FileReader();
            r.readAsDataURL(file);    //Base64
            $(r).load(function(){
                $('.w100').html('<img src="'+ this.result +'" alt="" />');
                $('.w55').html('<img src="'+ this.result +'" alt="" />');
            });
        });
    });

</script>

</body>
</html>
